<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>订单管理</span></div>
      <div class="seed_page_tool"></div>
  </div>
  <div class="seed_ord_body">
    <div class="seed_list_ss" style="width: 100% !important;">
      <div class="seed_list_ssk seed_user_list_ssk">
        <img src="@/assets/images/ss.png" alt="">
        <input class="seed_list_ss" type="text" v-model="param.order_sn" placeholder="输入订单号" >
      </div>
      <input class="seed_list_ssb" type="button" value="搜索" @click="seach">
    </div>
    <div class="seed_ord_head">
      <div class="seed_ord_navbar">
        <!--循环-->
        <div v-for="(item,index) in navbar" class="seed_ord_item" @click="navbarTap(index)" v-bind:key="index">
          <span :class="currentTab==index?'seed_ord_active_navbar':''">{{item}}</span>
          <div class="seed_ord_sub" :class="currentTab==index?'seed_ord_sub_active':''"></div>
        </div>
      </div>
    </div>
    <div class="seed_list_secondo">
      <!--待付款-->
      <div v-if="currentTab==0"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(order ,index) in list" v-bind:key="index">
          <div class="seed_list_second_ddh">
            <span>订单号:</span>
            <u>{{order.order_sn}}</u>
            <i>{{order.status_name}}</i>
          </div>
          <div class="seed_list_second_cbox" v-for="box in order.order_goods">
            <div class="show-img">
              <img v-bind:src="box.goods_thumb" @load="successLoadImg" @error="errorLoadImg">
            </div>
            <div class="seed_list_second_cbox_r">
              <span class="seed_list_second_cbox_r_t">{{box.goods_name}}</span>
              <div class="seed_list_second_cbox_b">
                <div class="seed_list_second_cbox_b_l">
                  <span>￥</span>
                  <u>{{box.goods_price}}</u>
                </div>
                <div class="seed_list_second_cbox_b_r">
                  <span>x</span>
                  <u>{{box.goods_number}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b">
            <div>
              <span>买家:</span>
              <u>{{order.username}}</u>
            </div>
            <div>
              <span>{{date[index]}}</span>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <router-link :to="{name:'order-detail',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_l">订单详情</router-link>
            <div class="seed_list_second_b_b_r"  @click="cancelOrder(order.order_id,order.order_message,index)">取消订单</div>
          </div>
        </div>
        <!--每一个订单到这-->
      </div>
      <!--待发货-->
      <div v-else-if="currentTab==1"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(order ,index) in list">
          <div class="seed_list_second_ddh">
            <span>订单号:</span>
            <u>{{order.order_sn}}</u>
            <i>{{order.status_name}}</i>
          </div>
          <div class="seed_list_second_cbox" v-for="box in order.order_goods">
            <div class="show-img">
              <img v-bind:src="box.goods_thumb" @load="successLoadImg" @error="errorLoadImg">
            </div>
            <div class="seed_list_second_cbox_r">
              <span class="seed_list_second_cbox_r_t">{{box.goods_name}}</span>
              <div class="seed_list_second_cbox_b">
                <div class="seed_list_second_cbox_b_l">
                  <span>￥</span>
                  <u>{{box.goods_price}}</u>
                </div>
                <div class="seed_list_second_cbox_b_r">
                  <span>x</span>
                  <u>{{box.goods_number}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b">
            <div>
              <span>买家:</span>
              <u>{{order.username}}</u>
            </div>
            <div>
              <span>{{date[index]}}</span>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <router-link :to="{name:'order-detail',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_l">订单详情</router-link>
            <router-link :to="{name:'order-send',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_r">发货设置</router-link>
          </div>
        </div>
        <!--每一个订单到这-->
      </div>
      <!--已发货-->
      <div v-else-if="currentTab==2"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(order ,index) in list">
          <div class="seed_list_second_ddh">
            <span>订单号:</span>
            <u>{{order.order_sn}}</u>
            <i>{{order.status_name}}</i>
          </div>
          <div class="seed_list_second_cbox" v-for="box in order.order_goods">
            <div class="show-img">
              <img v-bind:src="box.goods_thumb" @load="successLoadImg" @error="errorLoadImg">
            </div>
            <div class="seed_list_second_cbox_r">
              <span class="seed_list_second_cbox_r_t">{{box.goods_name}}</span>
              <div class="seed_list_second_cbox_b">
                <div class="seed_list_second_cbox_b_l">
                  <span>￥</span>
                  <u>{{box.goods_price}}</u>
                </div>
                <div class="seed_list_second_cbox_b_r">
                  <span>x</span>
                  <u>{{box.goods_number}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b">
            <div>
              <span>买家:</span>
              <u>{{order.username}}</u>
            </div>
            <div>
              <span>{{date[index]}}</span>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <router-link :to="{name:'order-detail',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_l">订单详情</router-link>
            <router-link :to="{name:'order-logistics',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_r">查看物流</router-link>
          </div>
        </div>
        <!--每一个订单到这-->
      </div>
      <!--已完成-->
      <div v-else-if="currentTab==3"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(order ,index) in list">
          <div class="seed_list_second_ddh">
            <span>订单号:</span>
            <u>{{order.order_sn}}</u>
            <i>{{order.status_name}}</i>
          </div>
          <div class="seed_list_second_cbox" v-for="box in order.order_goods">
            <div class="show-img">
              <img v-bind:src="box.goods_thumb" @load="successLoadImg" @error="errorLoadImg">
            </div>
            <div class="seed_list_second_cbox_r">
              <span class="seed_list_second_cbox_r_t">{{box.goods_name}}</span>
              <div class="seed_list_second_cbox_b">
                <div class="seed_list_second_cbox_b_l">
                  <span>￥</span>
                  <u>{{box.goods_price}}</u>
                </div>
                <div class="seed_list_second_cbox_b_r">
                  <span>x</span>
                  <u>{{box.goods_number}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b">
            <div>
              <span>买家:</span>
              <u>{{order.username}}</u>
            </div>
            <div>
              <span>{{date[index]}}</span>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <router-link :to="{name:'order-detail',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_l">订单详情</router-link>
            <router-link :to="{name:'order-logistics',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_r" v-if="order.is_self_fetch === 0">查看物流</router-link>
            <span class="seed_list_second_b_b_r" v-if="order.is_self_fetch === 1" style="color: #cccccc">自提订单</span>
          </div>
        </div>
        <!--每一个订单到这-->
      </div>
      <!--已取消-->
      <div v-else="currentTab==4"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list" v-for="(order ,index) in list">
          <div class="seed_list_second_ddh">
            <span>订单号:</span>
            <u>{{order.order_sn}}</u>
            <i>{{order.status_name}}</i>
          </div>
          <div class="seed_list_second_cbox" v-for="box in order.order_goods">
            <div class="show-img">
              <img v-bind:src="box.goods_thumb" @load="successLoadImg" @error="errorLoadImg">
            </div>
            <div class="seed_list_second_cbox_r">
              <span class="seed_list_second_cbox_r_t">{{box.goods_name}}</span>
              <div class="seed_list_second_cbox_b">
                <div class="seed_list_second_cbox_b_l">
                  <span>￥</span>
                  <u>{{box.goods_price}}</u>
                </div>
                <div class="seed_list_second_cbox_b_r">
                  <span>x</span>
                  <u>{{box.goods_number}}</u>
                </div>
              </div>
            </div>
          </div>
          <div class="seed_list_second_b">
            <div>
              <span>买家:</span>
              <u>{{order.username}}</u>
            </div>
            <div>
              <span>{{date[index]}}</span>
            </div>
          </div>
          <div class="seed_list_second_b_b">
            <router-link :to="{name:'order-detail',params:{id:order.order_id, tab: currentTab}}" class="seed_list_second_b_b_l_l">订单详情</router-link>
          </div>
        </div>
        <!--每一个订单到这-->
      </div>
      <loading-more :allLoaded="allLoaded" :show="list.length > 0"></loading-more>
      <empty-data :show="allLoaded && list.length <= 0" style="margin-top: 1rem"></empty-data>
      <back-nav v-show="param.page > 1"></back-nav>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      navbar: ['待付款', '待发货', '已发货', '已完成', '已取消'],
      currentTab: 0,
      list: [],
      time: [],
      date: [],
      param: {
        page: 1,
        page_size: 5,
        type: '',
        order_sn: ''
      },
      allLoaded: false,
      loading: false
    }
  },
  created () {
    let tab = this.$route.params.tab
    if (tab !== undefined && tab >= 0) {
      this.currentTab = tab
    }
    this.getOrderManage()
  },
  methods: {
    navbarTap (index) {
      this.param.page = 1
      this.currentTab = index
      this.list = []
      this.getOrderManage()
      this.allLoaded = false
    },
    cancelOrder (id, msg, index) {
      let param = {
        order_id: id,
        msg: msg
      }
      this.$MessageBox.confirm('是否取消该订单?').then(action => {
        this.$request.cancelOrder(param).then(data => {
          this.$toast('取消成功')
          this.list.splice(index, 1)
        })
      })
    },
    getOrderManage () {
      let idx = this.currentTab
      let status_name = 'unpay'
      switch (parseInt(idx)) {
        case 0:
          status_name = 'unpay'
          break
        case 1:
          status_name = 'tosend'
          break
        case 2:
          status_name = 'sended'
          break
        case 3:
          status_name = 'succ'
          break
        case 4:
          status_name = 'cancel'
          break
      }
      this.param.type = status_name
      this.loading = true
      // 数据请求
      this.$request.orderManage(this.param).then(data => {
        if (this.param.page_size > data.length) {
          this.allLoaded = true
        }
        for (let i = 0; i < data.length; i++) {
          this.time.push(data[i].add_time)
        }
        for (let i = 0; i < this.time.length; i++) {
          this.date.push(this.timestampToTime(this.time[i]))
        }
        this.list = [...this.list, ...data]
      }).finally(() => {
        this.loading = false
      })
    },
    back () {
      this.$router.push({name: 'Home'})
    },
    loadMoreNotice () {
      if (this.loading || this.allLoaded) { // 正在加载 或 已取得全部数据
        return
      }
      setTimeout(() => {
        ++this.param.page
        this.getOrderManage()
      }, 300)
    },
    /**
     * 搜索
     */
    seach () {
      this.param.page = 1
      this.list = []
      this.getOrderManage()
      this.allLoaded = false
    },
    timestampToTime (timestamp) {
      var date = new Date(timestamp * 1000), // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-',
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
        D = date.getDate() + ' ',
        h = date.getHours() + ':',
        m = date.getMinutes() + ':',
        s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>
